<template>
  <div class="sidebar">
    <div class="menu">
      <router-link to="/home" class="menu-item">
        <i class="icon">📊</i>
        <span>首页</span>
      </router-link>
      <router-link to="/bill" class="menu-item">
        <i class="icon">💰</i>
        <span>账单管理</span>
      </router-link>
      <router-link to="/budget" class="menu-item">
        <i class="icon">📋</i>
        <span>预算管理</span>
      </router-link>
      <router-link to="/family" class="menu-item">
        <i class="icon">👨‍👦</i>
        <span>家庭管理</span>
      </router-link>
      <router-link to="/notifications" class="menu-item">
        <i class="icon">🔔</i>
        <span>系统通知</span>
      </router-link>
    </div>
    
    <div class="setting">
      <router-link to="/user-setting" class="menu-item">
        <i class="icon">⚙️</i>
        <span>用户设置</span>
      </router-link>
    </div>
  </div>
</template>

<style scoped>
.sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 200px;
  height: 100vh;
  background: #304156;
  position: fixed;
  left: 0;
  top: 0;
  color: white;
}

.menu {
  padding: 16px 0;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  color: #bfcbd9;
  text-decoration: none;
  transition: all 0.3s;
}

.menu-item:hover {
  background: #263445;
  color: white;
}

.menu-item.active {
  background: #263445;
  color: #409eff;
}

.setting {
  padding-top: 10px;
  margin-top: auto;
}

.icon {
  margin-right: 12px;
  font-size: 16px;
}
</style>
